<template>
    <s-box title="热词图谱" ref="loading" >
        <div class="chart-box" >
            <div class="chart-wrap" ref="chart" ></div>
        </div>
        <Modal
            class="modal-wrap"
            v-model="dialog"
            :title="modalName"
            >
            <div v-if="type=='author'">

                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">专家名称</div>
                        <div class="text">{{author.NAME}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">职称</div>
                        <div class="text">{{author.title}}</div>
                    </div>
                </div>
                <div class="list-item">
                  <div class="inline-block">
                    <div class="label">邮件</div>
                    <div class="text">{{author.email_list}}</div>
                  </div>
                </div>
                <div class="list-item">
                  <div class="inline-block">
                    <div class="label">发表文章数量</div>
                    <div class="text">{{author.num_pubs}}</div>
                  </div>
                </div>
                <div class="list-item">
                  <div class="inline-block">
                    <div class="label">被引数量</div>
                    <div class="text">{{author.num_citation}}</div>
                  </div>
                </div>
                <div class="list-item">
                  <div class="inline-block">
                    <div class="label">研究方向</div>
                    <div class="text">{{author.research_direction}}</div>
                  </div>
                </div>
            </div>
            <div v-if="type=='org'">
                 <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构名称</div>
                        <div class="text">{{org.NAME}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构描述</div>
                        <div class="text">{{org.description}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构英文名称</div>
                        <div class="text">{{org.name_en}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构部门</div>
                        <div class="text">{{org.department}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构所属国家</div>
                        <div class="text">{{org.nation}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构详细地址</div>
                        <div class="text">{{org.address}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构联系电话</div>
                        <div class="text">{{org.telphone}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构邮箱</div>
                        <div class="text">{{org.email}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">机构传真</div>
                        <div class="text">{{org.fax}}</div>
                    </div>
                </div>
            </div>
            <div v-if="type=='patent'">
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">专利名称</div>
                        <div class="text">{{patent.title}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">专利授权号</div>
                        <div class="text">{{patent.pub_number}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">申请号</div>
                        <div class="text">{{patent.app_number}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">申请年</div>
                        <div class="text">{{patent.app_year}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">专利类型</div>
                        <div class="text">{{patent.type}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">有效状态</div>
                        <div class="text">{{patent.status}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">申请人/申请单位</div>
                        <div class="text">{{patent.applicant}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">提名</div>
                        <div class="text">{{patent.proposer}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">当前申请人</div>
                        <div class="text">{{patent.cur_applicant}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">申请时间</div>
                        <div class="text">{{patent.app_time}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">开放年</div>
                        <div class="text">{{patent.open_year}}</div>
                    </div>
                </div>
                 <div class="list-item">
                    <div class="inline-block">
                        <div class="label">开放日期</div>
                        <div class="text">{{patent.open_time}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">生效时间</div>
                        <div class="text">{{patent.legal_status_time}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">发明人</div>
                        <div class="text">{{patent.inventors}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">第一发明人</div>
                        <div class="text">{{patent.first_inventor}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">发明人数</div>
                        <div class="text">{{patent.inventors_count}}</div>
                    </div>
                </div>
                 <div class="list-item">
                    <div class="inline-block">
                        <div class="label">申请人数</div>
                        <div class="text">{{patent.applicant_count}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">申请省份</div>
                        <div class="text">{{patent.applicant_province}}</div>
                    </div>
                </div>
            </div>
            <div v-if="type=='paper'">
                 <div class="list-item">
                    <div class="inline-block">
                         <div class="label">论文名称英文</div>
                         <div class="text">{{paper.title_en}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                         <div class="label">论文名称中文</div>
                         <div class="text">{{paper.title_zh}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                         <div class="label">论文关键词英文</div>
                         <div class="text">{{paper.keywords_en}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">论文关键词中文</div>
                        <div class="text">{{paper.keywords_zh}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">论文摘要英文</div>
                        <div class="text">{{paper.abstract_en}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">论文摘要中文</div>
                        <div class="text">{{paper.abstract_zh}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">作者列表英文</div>
                        <div class="text">{{paper.authors_en}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">作者列表中文</div>
                        <div class="text">{{paper.authors_zh}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                         <div class="label">作者单位列表英文</div>
                         <div class="text">{{paper.authors_affi_en}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <div class="inline-block">
                        <div class="label">作者单位列表中文</div>
                        <div class="text">{{paper.authors_affi_zh}}</div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button  long  @click="ok">关闭</Button>
            </div>
        </Modal>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import mixin from '../js/mixin.js';
const  COLOR = ['#9a6728','#00a8ff','#0d5a35','#b40177','#1490ae','#00ff00'];
const  CATEGORYLIST = ['热词','专家','机构','技术新闻动态','论文','专利'];
export default {
    mixins:[mixin],
    data() {
        return {
           nodes:[],
           edges:[],
           keyword:'',
           dialog:false,
           modalName:'',
           type:'',
           author:{},
           org:{},
           paper:{},
           patent:{}
        }
    },
    beforeDestroy(){
         // 解除事件绑定
        delegate.$off('s-resize',this._initChart);
        delegate.$off('s-search',this._search);
        this.myChart &&  this.myChart.clear();
    },
    mounted(){

        this._initMethod();
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._search)
            delegate.$on('s-resize',this._initChart)
        },
        _search(text) {
            this.keyword = text;
            this._initChart();
        },
        getItemProperty(id){
           let colorList = COLOR;
           let categoryList = CATEGORYLIST;
           let idsList = ['author','org','tech','paper','patent'];
           let index = -1;
           idsList.some((item,_index) => {
                if( (id+'').indexOf(item) >= 0 ){
                    index = _index;
                    return true;
                }
           });
           let current = index+1;
           return {color:colorList[current],category:categoryList[current]}

        　　//var colorStr=Math.floor((0.1+Math.random())*0xFFFFFF).toString(16).toUpperCase();
        　　//return "#"+"000000".substring(0,6-colorStr)+colorStr;
        },
         _setChartOption(){
             let $this = this;
             if(!this.myChart) {
                 this.myChart = echarts.init(this.$refs.chart);
                 // 绑定点击事件
                 this.myChart.on('click', function (params) {
                    $this.getInfoWindows(params);
                 });
             }

                this.myChart.showLoading();
                this.myChart.clear();
                this.myChart.hideLoading();
                this.myChart.setOption(
                {
                    color:COLOR,
                    animation:false,
                    animationDurationUpdate: 1500,
                    //animationEasingUpdate: "quinticInOut",
                    tooltip: {},
                    legend: [{
                        //selectedMode: 'single',
                        left:'10',
                        data: CATEGORYLIST,
                        textStyle:{
                            color:'#fff'
                        }
                    }],
                    series: [
                    {
                        zoom: 1,
                        type: "graph",
                        layout: "force",
                        // progressiveThreshold: 700,
                        force : { //力引导图基本配置
                            repulsion: 1400,
                            edgeLength: [150, 300],
                            layoutAnimation : true
                             //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
                        },
                        categories: CATEGORYLIST.map((item)=>{
                            return {
                                name: item
                            }
                        }),
                        data: $this.nodes,
                        draggable:false,
                        edgeSymbolSize: [4, 60],
                        edges: $this.edges,
                        symbolSize: 30,
                        label: {
                            show:true,
                            emphasis: {
                                position: "inside",
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 1,
                            }
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        emphasis: {
                            lineStyle: {
                                width: 4
                            }
                        }
                    }
                    ]
                },
                true
                );
         },
        _maxSize(nodelist){
            let MAXSIZE = 1;
            nodelist.forEach(node => {
                if(!node.size){
                    node.size = 1;
                }
                if(node.size >= MAXSIZE){
                    MAXSIZE = node.size
                }
            })
            return MAXSIZE;
        },
        _symbolSize(n,max){
            let SISE = 100;
            let per = n / max;
            let symbolSize = per*SISE >= SISE*0.2 ? parseInt(per*SISE) : 25 ;
            return symbolSize
        },
        _gethotWordsAtlasData(){
            if(!this.navCurrentId) return;
                    this.nodes = [];
                    this.edges = [];
                    this.api({
                            url: "newtechanalyse/hotWordsAtlas",
                            method: "post",
                            data:`topicId=${this.navCurrentId}&keyword=${this.keyword}`
                    }).then(data => {
                        this.$refs.loading.hide();
                        let $this = this;
                        let MAXSIZE = $this._maxSize(data.nodes);

                        data.nodes.forEach(function(node) {
                            node.symbolSize = $this._symbolSize(node.size,MAXSIZE);
                            let {category ,color } = $this.getItemProperty(node.id);
                            var datanode = {
                                // x: parseInt(Math.random()*800),
                                // y: parseInt(Math.random()*800),
                                category:category,
                                id: node.id + '',
                                name: node.label,
                                symbolSize: node.symbolSize ,
                                value:node.size,
                                itemStyle: {
                                    normal: {
                                        color: color
                                    }
                                },
                                label:{
                                    normal: {
                                        show: node.symbolSize > 25
                                    }
                                }
                            };
                            $this.nodes.push(datanode);
                        });
                        data.edges.forEach(function(edge) {
                            var dataedge =  {
                                source: edge.sourceID + '',
                                target: edge.targetID + '',
                                lineStyle:{
                                    width: 2
                                }
                            };
                            $this.edges.push(dataedge);
                        });

                        this._setChartOption();
                    }).catch((error) =>{ this.$refs.loading.hide()})
        },
        _initChart(){
            this.$refs.loading.show();
            this._gethotWordsAtlasData();
        },
        getInfoWindows(current){
           console.log(current)
            let id = current.data.id;
            let idsList = ['author','org','tech','paper','patent'];
            let index = -1;
            idsList.some((item,_index) => {
                if( (id+'').indexOf(item) >= 0 ){
                    index = _index;
                    return true;
                }
            });
            // 选择了节点
            if(index == -1){
                this.$message({
                  showClose: true,
                  message: '热词无法查看',
                  type: 'error'
                });
            }
            // author 专家
            if(index == 0){
                    this.modalName = '专家详情';
                    this.api({
                            url: "newtechanalyse/authorDetail",
                            method: "post",
                            data:`topicId=${this.navCurrentId}&authorId=${id.split('_')[1]}`
                    }).then(data => {
                        this.dialog = true;
                        this.type = "author";
                        this.author = data;
                    })
            }
            // org  机构
            if(index == 1){
                    this.modalName = '机构详情';
                    this.api({
                            url: "newtechanalyse/orgDetail",
                            method: "post",
                            data:`topicId=${this.navCurrentId}&orgId=${id.split('_')[1]}`
                    }).then(data => {
                        this.dialog = true;
                        this.type = "org";
                        this.org = data;
                    })
            }
            // tech
            if(index == 2){
                this.$message({
                  showClose: true,
                  message: '技术动态无法查看',
                  type: 'error'
                });
            }
            // paper 论文
            if(index == 3){
                this.modalName = '论文详情';
                this.api({
                        url: "newtechanalyse/paperDetail",
                        method: "post",
                        data:`topicId=${this.navCurrentId}&paperId=${id.split('_')[1]}`
                }).then(data => {
                    this.dialog = true;
                    this.type = "paper";
                    this.paper = data;
                })
            }
            // patent 专利
            if(index == 4){
                this.modalName = '专利详情';
                this.api({
                        url: "newtechanalyse/patentDetail",
                        method: "post",
                        data:`topicId=${this.navCurrentId}&patentId=${id.split('_')[1]}`
                }).then(data => {
                    this.dialog = true;
                    this.type = "patent";
                    this.patent = data;
                })
            }

        },
        ok() {
            this.dialog = false;
        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-box{
      position: relative;
      padding-top: 43%;
  }
  .chart-wrap{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }

</style>

